Hello and welcome.
In this lecture we are going to create the structure for our app using hastier mail.
This is the hastier mail.
I've got some basic tags already in here.
Hi will be built on top of this.
So these are just some basic tags are just run through them.
I'm sure you are familiar with them already.
Like one here is not truly part of hastier mould document.
It's a declaration basically said to tell the web browsers and search engines.
This document is in paste here Miller document.
So they had all the email documents is from line 2 to 14.
Most tags came with opening and close into the opening e mail online too.
They close in online 14.
You can tell the difference because we close in there so forward slash before the name of the tag the
hastier mill consists of other child elements.
I have invented the code a little bit so you can see the distinct distinction between the child and
the parent.
So looking at the code here the head the body tags.
But children of the hastier male element.
Wow the men that tagged the title and the link are child elements of the head.
The script tag is the child element of the body tag.
So lie for is embedded with an attribute called Cast set.
The valley is utf dash.
This is the encoding type.
It describes the type of encoding used lime five is a medder car set to metal tag with a attribute of
name value of viewport And also another attribute called content and the value set to with equal device
minus width comma initial that skill
equals one line.
5 like 5 is basically saying is that in the device regardless of the screen size.
Can you this web page.
That's what it's saying.
So Line 5 the viewport refers to this screen size which means the page can be this big is responsive
so that it will respond to any screen size the viewport is the value for that name attribute.
The content should be there.
The content attribute basically gives you the minors Kwas device minus with what they saying is that
regardless of the size of the screen you can fit it to view this web page and it gives an initial scale
as well which means you can zoom in on the initial scale.
The initial part where you zoom from where the zoom in actually release starts you can zoom in and zoom
out.
Line 6 is the title line 7.
Here's a link to the style sheet we created earlier.
The blank one and line 9 to 13 is a body tag and inside the body tag is this great tag.
It's always good to play a descriptor.
Just before the close embody tag so it gives the page it allows the page to load fully before any script
is executed.
The actual visible content that a visitor sees on a web page is actually the content that is placed
between the body TAC or like content between the body tag is visible.
The head section is just for informational reference purposes.
So we're going to add some more tags here in between the body tack to create development for each of
the balloons.
I have created a Deve here online 10 kord day and giving it a class of wrap up line 14 is close deep
in between.
The devil wrap the balloon so the balloons will be enclosed within this Dave.
I have created some more deep I've created online 11 they have created a head in tag which will provide
a title for our app line 12.
Did.
With a diva idea of you know Paula.
So this Deve idea will use tostada later we also include it a span and give it the giving this band
a class halsell or so on in 40 sorry line 15 year d'asti close indeed for this rapper deep rapper.
So we're going to create more DBS that will house each of the balloons.
So the Dave online 12 will be used to display a text when or the balloons have been popped.
I have created are nother div online 13 ending online 15.
So Dave here online 13 core beland Gallery in between is deaves is where we'll create the individual
deaves that wall house the individual balance.
So we're going to create 24 balance.
So I've created some individual dates for the balance saw line 14 15 and 16.
You can see online 14 they got Dave.
I did so each of Diddy's folded balloons will have their own I.D. So you've got the I.D. attributes
of boulogne defers what will be zero.
And going down to one to two twenty three.
So we created three of the balloons so far.
So I'm going to add the rest so all you have to do the next one will be Deve Heidi equals berland 3.
Right.
OK.
Two twenty three.
So I'm going to do them and then add them to the code.
So I have now dead the code for the rest of the balance.
There are 24 balloons in total.
The first ones have got an idea of zero right or two.
Twenty three.
So they have higher.
This is how the device for the balloons have been created.
Dave's a just it's just a diversion on a page.
Okay.
And then right at the bottom I'm OK on my script that's where I will make a reference to my javascript
that will create the functionality for this app.
So let me just bring that up here.
You can see that the code is also indented in a way that you can differentiate the parent child relationship.
All right.
Let me just say this then we can view and see what it looks like at the moment.
SA just open up the directory on my desktop and click on INDEX and that you show us what this structure
looks like.
So this is what the structure looks like at the moment.
We the barlows are not pronounced yet will need success to make them pronounced.
So that's it for this shot.
Thanks for watching.
By phone.